/**
 * @file
 * @auth jinguangguo
 * @date 2016/12/28
 */

import './OffsetConfirm.scss';

import Vue from 'vue';
import {LANG, LOCAL} from '../../util/lang';
import html from './OffsetConfirm.html';


$('body').append(html);

let WIDTH = 168;
if (LANG === LOCAL.cn) {
    WIDTH = 184;
}

let vm = new Vue({
    el: '#compOffsetConfirm',
    components: {

    },
    data() {

        let confirmText = 'Yes';
        let cancelText = 'No';
        if (LANG === LOCAL.cn) {
            confirmText = '确定';
            cancelText = '取消';
        }

        return {
            relative: false,
            width: WIDTH,
            height: 150,
            placement: 'top',   // 默认顶端显示
            show: false,
            title: '',
            content: '',
            confirmBtnText: confirmText,
            cancelBtnText: cancelText,
            onSure() {},
            onCancel() {}
        };
    },
    watch: {
        'show'(newVal, oldVal) {
            let $modal;
            let $arrow;
            if (newVal === true) {
                setTimeout(() => {
                    $modal = $(this.$refs.modal);
                    $arrow = $(this.$refs.arrow);
                    $modal.addClass('comp-confirm--animate');
                    $arrow.addClass('arrow--enter');
                    setTimeout(() => {
                        $arrow.removeClass('arrow--enter').addClass('arrow--enter-active');
                    }, 0.2);
                }, 0);
            } else{
                setTimeout(() => {
                    $modal = $(this.$refs.modal);
                    $modal.addClass('animated fadeOutDown');
                }, 0);
            }
        }
    },
    methods: {
        _setPositionAbsolute(trigger) {
            const arrow = this.$refs.arrow;

            let $trigger = $(trigger);
            let $arrow = $(arrow);

            let arrowLeft;
            let arrowTop;

            switch (this.placement) {
                case 'top' :
                    arrowLeft = $trigger.offset().left + trigger.offsetWidth / 2 - arrow.offsetWidth / 2;
                    arrowTop = $trigger.offset().top  - arrow.offsetHeight;
                    break;
                case 'bottom':
                    break;
                default:
                    console.warn('Wrong placement prop')
            }
            $arrow.css({
                top: arrowTop + 'px',
                left: arrowLeft + 'px'
            });

        },

        _setPositionRelative(target) {

        },

        setPosition(trigger) {
            setTimeout(() => {
                if (this.relative === true) {
                    this._setPositionRelative(trigger);
                } else {
                    this._setPositionAbsolute(trigger);
                }
                this._bind();
            }, 100);
        },

        _bind() {
            $(document).on('click', (e) => {
                if (this.show === true) {
                    this.show = false;
                }
            });
            const $modal = $(this.$refs.modal);
            $modal.on('click', (e) => {
                e.stopPropagation();
            });
        },

        hide() {
            this.show = false;
            $(document).off('click');
            const $modal = $(this.$refs.modal);
            $modal.off('click');
        }

    }
});


const confirm = function (config) {
    let deferred = $.Deferred();
    let option = $.extend({}, {
        width: config.width || WIDTH,
        title: config.title,
        content: config.content,
        confirmBtnText: config.confirmBtnText,
        cancelBtnText: config.cancelBtnText,
        onSure() {
            vm.hide();
            if ($.isFunction(config.onSure) === true) {
                config.onSure();
            } else {
                deferred.resolveWith();
            }
        },
        onCancel() {
            vm.hide();
            if ($.isFunction(config.onCancel) === true) {
                config.onCancel();
            } else {
                deferred.rejectWith();
            }
        }
    });

    $.map(option, (value, key) => {
        vm[key] = value;
    });
    vm.hide();
    vm.show = true;

    // 计算位置
    if (config.target) {
        vm.setPosition(config.target);
    } else {
        throw new Error('The target is must !');
    }
    
    return deferred;
};

window.confirm = confirm;

/**
 * confirm
 * @param config
 * @returns {*}
 */
export default confirm;

